import React from "react";
import { BrowserRouter, NavLink, Route, Prompt } from "react-router-dom";
import Hot from "./component/hot";
import Vip from "./component/vip";
import Public from "./component/public";
import Login from "./component/login";

/*
  后端：
  1.搭建后台登录接口post请求
  2.热门小说，免费小说接口，vip小说接口
  *****
  前端：
  1.一级导航：热门小说，免费小说，vip小说
  2.二级导航是根据以及导航获取的小说目录
  3.三级路由，是根据二级路由的id动态获取的
  逻辑：
  热门小说和免费小说都可以无登录阅读，vip必须验证是否登录，如果没有登录则提示并且跳转到登录页
*/

const Index = () => {
  // axios
  //   .post("http://localhost:8080/login", {
  //     username: "程序",
  //     password: "123"
  //   })
  //   .then(res => {
  //     console.log(res.data);
  //   });
  return (
   
    <BrowserRouter>
      <nav
        style={{
          fontSize: "40px",
          display: "flex",
          justifyContent: "space-evenly"
        }}
      >
        <NavLink to="/hot">热门小说</NavLink>
        <NavLink to="/public">免费小说</NavLink>
        <NavLink to="/vip">vip小说</NavLink>
      </nav>
      <main>
        {/* 拦截器2.权限控制 */}
        <Route
          children={props => {
            return (
              <Prompt
                message={location => {
                  // location表示进入下一个路由的信息对象
                  if (location.pathname === "/vip") {
                    // 从全局里获取用户的登录信息
                    const user = window.sessionStorage.getItem("user");
                    if (user) {
                      return true;
                    } else {
                      alert("您没有登陆不能查看！");
                      props.history.replace("/login");
                      return false;
                    }
                  }
                  return true;
                }}
              />
            );
          }}
        />
        {/* 线路 */}
        <Route path="/hot" component={Hot} />
        <Route path="/public" component={Public} />
        <Route path="/vip" component={Vip} />
        <Route path="/login" component={Login} />
      </main>
    </BrowserRouter>
  );
};
export default Index;
